<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import result from "@/utils/mapValue/cq2.json";

import { useUserStore } from "../../../stores/user";
import { event_details, event_info } from "../../../api";
import IncidentDialog from "./components/incidentDialog.vue";
import { getCqData_byyx } from "@/api/stud";
import { ElMessage } from "element-plus";
import { useAiStore } from "@/stores/aiStore";
import AiDialog from "./components/AiDialog.vue";
import { schoolData } from "./tt_school_info.js";
import { startTooltipLoop } from "@/utils/echartsUtils";

defineProps(["centerData"]);

const dataStore = useUserStore();
const aiDataStore = useAiStore();
var mapName = "result";
const showP = ref("市级");
const aiVisible = ref(false);
const EraYVisible = ref(true);
const myChart1 = ref();
const showData = ref({
  item1: "51.89",
  item2: "48.88",
  item3: "58",
  item4: "94.20",
  item5: "42055.29",
  item6: "100",
});



const geoCoordMap = {
  渝中区: [106.575354, 29.558923],
  万州区: [108.380246, 30.807807],
  武隆区: [107.75655, 29.32376],
  綦江区: [106.651417, 29.028091],
  巫山县: [109.878928, 31.074843],
};
const data = [
  { name: "万州区", value: 20 },
  { name: "綦江区", value: 67 },
  { name: "大足区", value: 80 },
  { name: "渝北区", value: 90 },
  { name: "巴南区", value: 20 },
  { name: "黔江区", value: 96 },
  { name: "长寿区", value: 85 },
  { name: "江津区", value: 85 },
  { name: "合川区", value: 85 },
  { name: "永川区", value: 85 },
  { name: "南川区", value: 85 },
  { name: "涪陵区", value: 95 },
  { name: "璧山区", value: 85 },
  { name: "铜梁区", value: 85 },
  { name: "潼南区", value: 85 },
  { name: "荣昌区", value: 85 },
  { name: "开州区", value: 85 },
  { name: "梁平区", value: 85 },
  { name: "武隆区", value: 85 },
  { name: "城口县", value: 85 },
  { name: "丰都县", value: 85 },
  { name: "垫江县", value: 85 },
  { name: "渝中区", value: 85 },
  { name: "忠县", value: 85 },
  { name: "云阳县", value: 85 },
  { name: "奉节县", value: 85 },
  { name: "巫山县", value: 18 },
  { name: "巫溪县", value: 85 },
  { name: "石柱土家族自治县", value: 85 },
  { name: "秀山土家族苗族自治县", value: 85 },
  { name: "酉阳土家族苗族自治县", value: 85 },
  { name: "彭水苗族土家族自治县", value: 85 },
  { name: "两江新区", value: 85 },
  { name: "大渡口区", value: 85 },
  { name: "万盛经济技术开发区", value: 85 },
  { name: "高新技术产业开发区", value: 85 },
  { name: "江北区", value: 85 },
  { name: "沙坪坝区", value: 20 },
  { name: "九龙坡区", value: 95 },
  { name: "南岸区", value: 85 },
  { name: "北碚区", value: 60 },
];

const convertData = data.map((item) => {
  // 在 schoolData 中查找同一管理区的第一个学校
  const matched = schoolData.find((g) => g.management_area_name === item.name);
  // console.log(matched, "matched");
  if (matched) {
    // 使用高德坐标 (gd_x, gd_y)
    return {
      name: item.name,
      value: [
        Number(matched.baidu_x),
        Number(matched.baidu_y),
        matched.name,
        matched.score,
      ],
    };
  }
  return {
    name: item.name,
    value: [null, null, null, null],
  }; // 无坐标时留空
});



const data1 = [
  { name: "渝北区", value: 200 },
  { name: "巴南区", value: 200 },
  { name: "渝中区", value: 200 },
  { name: "大渡口区", value: 200 },
  { name: "江北区", value: 234 },
  { name: "沙坪坝区", value: 200 },
  { name: "九龙坡区", value: 200 },
  { name: "南岸区", value: 285 },
  { name: "北碚区", value: 229 },
];

const convertData1 = data1.map((item) => {
  const coord = geoCoordMap[item.name];
  if (coord) {
    return {
      name: item.name,
      value: [...coord, item.value],
    };
  }
  return item;
});

const getData = async () => {
  await getCqData_byyx().then((res) => {
    let arr = Object.values(res.data.uniTj || {});
    tableData.value = arr;
  });
};
onMounted(() => {
  initss();
  getData();
});

// 大地图
const initss = () => {
  const dom = document.getElementById("container");
  dom.removeAttribute("_echarts_instance_");
  const myChart = echarts.init(dom);
  myChart1.value = myChart;
  myChart.showLoading();
  echarts.registerMap("result", result);
  myChart.hideLoading();
  const option = {
    tooltip: {
      trigger: "item",
      // extraCssText:
      //   "background: rgba(7,68,124,0.8);border: 1px solid #2D80FF;border-radius: 4px;padding: 4px 10px;box-sizing: border-box;",
      formatter: function (params) {
        let text = "";
        if (params.seriesType === "scatter") {
          text =
            `<div style='color:#fff;font-size:12px'>${params.value[2]}</div>` +
            `<div><span style='color: rgba(201,233,248,0.8);font-size: 14px;'>学生就业形势感知：<span><span style='color: #fff;font-size: 14px;'>${params.value[3]}</span></div>`;
        }

        showP.value = params.name;

        showData.value = {
          item1: "--",
          item2: "--",
          item3: "--",
          item4: "--",
          item5: "--",
          item6: "--",
        };
        // return `<div style="padding: 2vw;">${params.name}<p>在线教学使用人次:${
        //   typeof params.value === "number" ? params.value : params.value[2]
        // }</p>\n</div>`;
        return text;
      },
      backgroundColor: "rgba(50,50,50,0.7)",
      borderColor: "#333",
      padding: [5, 10],
      textStyle: {
        color: "#fff",
        fontSize: "16",
      },
    },
    geo: [
      {
        layoutCenter: ["50%", "50%"], //位置
        layoutSize: "230%", //大小
        show: true,
        map: mapName,
        // emphasis: {
        //   disabled:false
        // },
        select: {
          itemStyle: {
            areaColor: "red",
            borderColor: "#0CDEFF",
            borderWidth: 3,
          },
          label: {
            color: "#fff",
          },
        },
        roam: false,
        zoom: 0.55,
        aspectScale: 1.1,

        label: {
          color: "#fff",
          normal: {
            show: false,
            textStyle: {
              color: "#fff",
            },
          },
          emphasis: {
            show: true,
            textStyle: {
              color: "#000",
            },
          },
        },
        itemStyle: {
          normal: {
            areaColor: {
              type: "linear",
              x: 1200,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                // {
                //   offset: 0,
                //   color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                // },
                // {
                //   offset: 1,
                //   color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                // },
              ],
              global: true, // 缺省为 false
            },
            borderColor: "#c0f3fb",
            borderWidth: 1,
            // shadowColor: "#8cd3ef",
            shadowColor: "#91e9fc",
            //  shadowColor: "#1a416a",
            shadowOffsetY: 0.5,
            shadowBlur: 0.5,
          },
          emphasis: {
            // areaColor: "rgba(0,254,233,0.6)",                 //鼠标覆盖背景色
            areaColor: "rgba(255,255,255,0.8)",
          },
        },
      },
    ],
    visualMap: {
      type: "piecewise",
      seriesIndex: 0,
      textStyle: {
        color: "#ffffff",
      },
      // right:0,
      selectedMode: false,
      show: false,
      pieces: [
        { min: 0, max: 59.9, label: "0-59.9", color: "#B04332" }, //
        { min: 60, max: 84.9, label: "60-84.9", color: "#E49317" }, //
        { min: 85, max: 94.9, label: "85-94.9", color: "#3877B2" }, //
        { min: 95, max: 100, label: "95-100", color: "#1AA76C" },
        // 注意：这里的min和max值应该根据你的实际数据范围来设置
      ],
      // 可选配置，如果你的地图数据值需要被映射到这些颜色区间
      // inRange: {
      //     color: ['lightgrey', 'grey'] // 默认颜色的区间，可选
      // },
      // outOfRange: {
      //     color: '#999' // 超出范围的颜色，可选
      // }
    },
    series: [
      {
        type: "map",
        map: mapName,
        geoIndex: 0,
        aspectScale: 1.2, //长宽比
        zoom: 0.5,
        showLegendSymbol: true,
        roam: true,
        label: {
          normal: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: "120%",
            },
          },
          emphasis: {
            // show: false,
          },
        },
        itemStyle: {
          normal: {
            areaColor: {
              type: "linear",
              x: 1200,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                // {
                //   offset: 0,
                //   color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                // },
                // {
                //   offset: 1,
                //   color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                // },
              ],
              global: true, // 缺省为 false
            },
            borderColor: "#fff",
            borderWidth: 0.2,
          },
        },
        layoutCenter: ["50%", "50%"],
        layoutSize: "180%",
        animation: false,
        markPoint: {
          symbol: "none",
        },
        data: data,
        selectedMode: "single",
        select: {
          itemStyle: {
            areaColor: "red",
            borderColor: "#0CDEFF",
            borderWidth: 3,
          },
          label: {
            color: "#fff",
          },
        },
        emphasis: {
          itemStyle: {
            areaColor: "red", // 可选：设置高亮时的颜色
          },
        },
      },
      {
        name: "空中课堂",
        type: "scatter", // 普通散点图，无动态效果
        coordinateSystem: "geo", // 依赖 geo 地图
        symbol: "circle", // 圆形标点
        symbolSize: 12,
        itemStyle: {
          color: "#FF292F", // 红色标点
          shadowBlur: 6,
          shadowColor: "rgba(255,134,134,0.8)",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
        },
        data: convertData, // 传入转换后的数据
      },
    ],
  };
  myChart.setOption(option);
  myChart.on('finished', () => {
  startTooltipLoop(myChart, 1, 2500);
});
  // myChart.on("click", async (params) => {
  //   console.log(params);
  //   showP.value = params.name;
  //   initss1();
  // });
  myChart.on("mouseout", function (params) {
    showP.value = "市级";

    showData.value = {
      item1: "51.89",
      item2: "48.88",
      item3: "58",
      item4: "94.20",
      item5: "42055.29",
      item6: "100",
    };
  });
};

const tableData = ref([
  // {
  //   serialN: "1",
  //   name: "学校名称",
  //   type: "基层就业",
  //   index: "8.1",
  // },
  // {
  //   serialN: "2",
  //   name: "学校名称",
  //   type: "基层就业",
  //   index: "5.7",
  // },
  // {
  //   serialN: "3",
  //   name: "学校名称",
  //   type: "基层就业",
  //   index: "3.6",
  // },
]);


const gxp1show = ref(false);
const xqca = ref();
const goDKdetails = (v) => {
  console.log(v, "yyyy");
  // xqca.value = v
  event_info({ eventType: "720152", eventNum: v.eventNum }).then((res) => {
    console.log(res, "yuwang res");
    if (res.code == 200) {
      xqca.value = res.data[0] || {};
    }
  });
  gxp1show.value = true;
};

const godd = (v) => {
  dd.ready(() => {
    let account = ["979020", "979019"];
    window.location.href = `taurusykz://taurusclient/action/avmeeting/conferenceCreateByIds?title=测试会议名称&isVideoConference=false&calleeStaffIds=${account}`;
    dd.createVideoMeeting({
      title: "会议名称",
      calleeStaffIds: ["979020", "979019"],
    }).then((res) => {
      console.log(res, "会议创建成功");
    });
  });
};
</script>

<template>
  <div class="info">
    <div class="box1">
      <div class="box1_letf"></div>
      <div class="box1_centre">
        <div class="box1_centre_tit">
          <div class="box1_centre_tit_c1">关键绩效指标（KPI）</div>
          <div class="box1_centre_tit_c">{{ showP }}</div>
        </div>
        <div class="box1_centre_c">
          <div class="box1_centre_c_c">
            <div class="box1_centre_c_c_img box1_centre_c_c_img_bg2">
              <img src="@/assets/images/kpi_item1.png" alt="" />
            </div>
            <div class="box1_centre_c_c_canter">
              <div class="box1_centre_c_c_canter_tit text-c9-65-14">
                简历优化人数
              </div>
              <div class="box1_centre_c_c_canter_num">
                <span class="text-4b-20">{{
                  centerData?.resume_youhua || "--"
                }}</span
                ><span class="text-c9-75-12">人</span>
              </div>
            </div>
          </div>

          <div class="box1_centre_c_c">
            <div class="box1_centre_c_c_img box1_centre_c_c_img_bg1">
              <img src="@/assets/images/kpi_item3.png" alt="" />
            </div>
            <div class="box1_centre_c_c_canter">
              <div class="box1_centre_c_c_canter_tit text-c9-65-14">
                模拟面试人数
              </div>
              <div class="box1_centre_c_c_canter_num">
                <span class="text-4b-20">{{
                  centerData?.interview_moni || "--"
                }}</span
                ><span class="text-c9-75-12">人</span>
              </div>
            </div>
          </div>

          <div class="box1_centre_c_c">
            <div class="box1_centre_c_c_img box1_centre_c_c_img_bg3">
              <img src="@/assets/images/kpi_item2.png" alt="" />
            </div>
            <div class="box1_centre_c_c_canter">
              <div class="box1_centre_c_c_canter_tit text-c9-65-14">
                AI问答人数
              </div>
              <div class="box1_centre_c_c_canter_num">
                <span class="text-4b-20">{{
                  centerData?.ai_count || "--"
                }}</span
                ><span class="text-c9-75-12">人</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box1_r"></div>
    </div>
    <div class="box2">
      <div class="map" id="container"></div>
      <div class="box2_c1">
        <div class="box2_c1_c"></div>
        <div class="text-c9-55-14">高校</div>
      </div>
      <!-- <div class="box2_c2">
        <div class="box2_c2_tit">处置率(%)</div>
      </div> -->
      <!-- <div class="box2_c3">
        <div class="box2_c3_tit">中心城区</div>
        <div class="box2_c3_map" id="box2_c3_map"></div>
      </div> -->
      <!-- <div class="box2_AI" @click="aiVisible = true">
        <img src="@/assets/images/AI_d.png" alt="" />
      </div> -->
    </div>
    <div class="box3">
      <div class="tit">
        <!-- <div class="tit_c">
          <div class="text-c9-65-12">办件量</div>
          <div class="text-gray-16 mr-1 ml-2">34</div>
          <div class="text-opacity-c9-55-12">件</div>
        </div>
        <div class="tit_c">
          <div class="text-c9-65-12">处置中</div>
          <div class="text-yellow-16 mr-1 ml-2">1</div>
          <div class="text-opacity-c9-55-12">件</div>
        </div>
        <div class="tit_c">
          <div class="text-c9-65-12">已办理</div>
          <div class="text-green-16 mr-1 ml-2">33</div>
          <div class="text-opacity-c9-55-12">件</div>
        </div> -->
      </div>
      <div class="box3_c">
        <div class="box3_c_c box3_c_c_z">
          <div class="box3_c_c_a text-c9-55-14">序号</div>
          <div class="box3_c_c_b text-c9-55-14">学校名称</div>
          <!-- <div class="box3_c_c_c_ text-c9-55-14">毕业意愿类型</div> -->
          <div class="box3_c_c_d text-c9-55-14">学生就业形势感知</div>
          <div class="box3_c_c_e text-c9-55-14">操作</div>
        </div>
        <vue3-seamless-scroll
          :list="tableData"
          :hover-stop="true"
          :step="0.3"
          :limit-scroll-num="5"
          :disabled="tableData.length < 5"
          hover="true"
          class="scroll-box"
        >
          <div
            class="box3_c_c box3_c_c_"
            v-for="(item, index) in tableData"
            :key="index"
          >
            <div class="box3_c_c_a text-c9-55-14">{{ index + 1 }}</div>
            <div class="box3_c_c_b text-c9-55-14">{{ item.school_name }}</div>
            <!-- <div class="box3_c_c_c_ text-c9-55-14">{{ item.type }}</div> -->
            <div class="box3_c_c_d text-c9-55-14">{{ item.score }}</div>

            <div class="box3_c_c_e text-4b-65-14" @click="godd">调度</div>
          </div>
        </vue3-seamless-scroll>
      </div>
    </div>

    <IncidentDialog
      :visible="gxp1show"
      :title="'事件详情'"
      :thead="thead"
      :data="xqca"
      @close="
        () => {
          gxp1show = false;
        }
      "
    ></IncidentDialog>

    <AiDialog
      :visible="aiVisible"
      title="对话框"
      @close="aiVisible = false"
    ></AiDialog>
  </div>
</template>

<style lang="less" scoped>
@import "./index.less";
.op {
  opacity: 0;
}
.scroll-box {
  height: 120px;
  overflow: hidden;
  padding-top: 20px; /* ⬅️ 给滚动区顶部留空间 */
}
</style>
